import { ComponentProps, VueComponent } from "vue3-oop"
import { NRow,NCol } from 'naive-ui';
import WidgetView from '../../basic/WidgetView'
import styles from './FlexView.module.scss'
import { WidgetNode } from '../../../types'
import FlexProps from "./FlexProps";
import LayoutProps from "../../basic/LayoutProps"

interface IProps {
  widgetNode: WidgetNode
}
export default class FlexView extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ) {
    super();
  }

  render() {
    const { widgetNode } = this.props;
    const widgetProps = widgetNode.widgetProps as FlexProps;

    let defaultSpan = widgetProps.defaultSpan || 24;

    // 水平间距
    const xGap = widgetProps.gaps.x;
    // 垂直间距
    const yGap = widgetProps.gaps.y;

    return (
      <NRow
        class={[styles.flex_view]}
        gutter={[xGap,yGap]}
        style={{
          flexWrap: 'wrap',
          alignContent: 'flex-start',
          minHeight: '56px',
          marginLeft: 'unset',
          marginRight: 'unset'
        }}
      >
        {this.props.widgetNode?.children?.map((childNode:WidgetNode)=>{
          if(childNode.widgetId){
            const childProps = childNode.widgetProps as LayoutProps;
            return(
              <NCol
                class={[styles.flex_child]}
                span={childProps.layout_reactive.span as any}
                {...{
                  style:{
                    height:'unset',
                  }
                }}
              >
                <WidgetView
                  widgetNode={childNode}
                />
              </NCol>
            )
          }
        })
        }
      </NRow>
    )
  }
}